<template>
  <div class="home-banner">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ff0000">
      <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
        <img :src="item.img">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script setup lang="ts">
import { homeSwiper } from "../../../request/home"
import { onMounted, ref} from 'vue'

const bannerList = ref<Array<bannerDataInfo>>([])

// 响应数据中data的接口
interface bannerDataInfo{
  alt?: string
  bannerid?: string
  flag?: boolean
  img?: string
  link?: string
}
// 整个响应数据的接口
interface ReponseInfo {
  code?: string
  data?: Array<bannerDataInfo>
}

// 发送请求获取轮播图
onMounted(async () => {
  const res = await homeSwiper()
  if ((res as unknown as ReponseInfo).code !== '200') return
  bannerList.value = res.data
})

</script>
<style scoped lang="scss">
.my-swipe .van-swipe-item {
    color: #fff;
    line-height: 150px;
    text-align: center;
  }
.home-banner{
  height: 170px;
  position: relative;
  margin-top: -20px;
  &::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #ff1010;
    border-radius: 80px / 10px;
    transform: translateY(-50px);
    z-index: 1;
  }
  .my-swipe{
    z-index: 2;
    width: 93%;
    height: 100%;
    margin: 20px auto;
    border-radius: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

</style>